<template>
  <div class="min-h-screen bg-base-200">
  <!-- 导航栏 -->
  <div class="navbar bg-base-100 shadow-lg sticky top-0 z-50">
    <div class="navbar-start">
      <!-- 移动端菜单按钮 -->
      <div class="dropdown">
        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden" onclick="toggleSidebar()">
          <font-awesome-icon icon="bars"></font-awesome-icon>
        </div>
      </div>

      <!-- Logo -->
      <a class="btn btn-ghost text-xl" href="#">
        <font-awesome-icon icon="dashboard"></font-awesome-icon>
        <span class="hidden md:inline">DaisyUI Admin</span>
      </a>
    </div>

    <div class="navbar-center hidden lg:flex">
      <!-- 搜索框 -->
      <div class="form-control">
        <input type="text" placeholder="搜索..." class="input input-bordered w-24 md:w-auto" />
      </div>
    </div>

    <div class="navbar-end">
      <!-- 主题切换 -->
       <theme></theme>

      <!-- 语言切换 -->
      <div class="dropdown dropdown-end">
        <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
          <font-awesome-icon icon="language"></font-awesome-icon>
        </div>
        <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-32 p-2 shadow">
          <li><a onclick="changeLanguage('zh-CN')">简体中文</a></li>
          <li><a onclick="changeLanguage('en-US')">English</a></li>
          <li><a onclick="changeLanguage('ja-JP')">日本語</a></li>
        </ul>
      </div>

      <!-- 通知 -->
      <div class="dropdown dropdown-end">
        <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
          <div class="indicator">
            <font-awesome-icon icon="bell"></font-awesome-icon>
            <span class="badge badge-xs badge-primary indicator-item">3</span>
          </div>
        </div>
        <div tabindex="0" class="mt-3 z-[1] card card-compact dropdown-content w-52 bg-base-100 shadow">
          <div class="card-body">
            <span class="font-bold text-lg">3 条通知</span>
            <span class="text-info">您有新的消息</span>
          </div>
        </div>
      </div>

      <!-- 用户菜单 -->
      <div class="dropdown dropdown-end">
        <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
          <div class="w-10 rounded-full">
            <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
          </div>
        </div>
        <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
          <li><a><font-awesome-icon icon="user"></font-awesome-icon> 个人资料</a></li>
          <li><a><font-awesome-icon icon="cog"></font-awesome-icon> 设置</a></li>
          <li><a><font-awesome-icon icon="sign-out"></font-awesome-icon> 退出登录</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="flex">
    <!-- 侧边栏 -->
    <div class="sidebar w-64 min-h-screen bg-base-100 shadow-lg fixed lg:static z-40" id="sidebar">
      <div class="p-4">
        <h2 class="menu-title text-lg font-bold mb-4">主菜单</h2>

        <ul class="menu">
          <li><a class="active"><font-awesome-icon icon="dashboard"></font-awesome-icon> <span class="sidebar-text">控制台</span></a></li>

          <li>
            <details open>
              <summary><font-awesome-icon icon="users"></font-awesome-icon> <span class="sidebar-text">用户管理</span></summary>
              <ul>
                <li><a><font-awesome-icon icon="list"></font-awesome-icon> <span class="sidebar-text">用户列表</span></a></li>
                <li><a><font-awesome-icon icon="plus"></font-awesome-icon> <span class="sidebar-text">添加用户</span></a></li>
                <li><a><font-awesome-icon icon="cog"></font-awesome-icon> <span class="sidebar-text">权限设置</span></a></li>
              </ul>
            </details>
          </li>

          <li>
            <details>
              <summary><font-awesome-icon icon="shopping-cart"></font-awesome-icon> <span class="sidebar-text">商品管理</span></summary>
              <ul>
                <li><a><font-awesome-icon icon="list"></font-awesome-icon> <span class="sidebar-text">商品列表</span></a></li>
                <li><a><font-awesome-icon icon="tags"></font-awesome-icon> <span class="sidebar-text">分类管理</span></a></li>
                <li><a><font-awesome-icon icon="star"></font-awesome-icon> <span class="sidebar-text">评价管理</span></a></li>
              </ul>
            </details>
          </li>

          <li><a><font-awesome-icon icon="bar-chart"></font-awesome-icon> <span class="sidebar-text">数据统计</span></a></li>
          <li><a><font-awesome-icon icon="cog"></font-awesome-icon> <span class="sidebar-text">系统设置</span></a></li>
          <li><a><font-awesome-icon icon="question-circle"></font-awesome-icon> <span class="sidebar-text">帮助中心</span></a></li>
        </ul>

        <div class="divider"></div>

        <h2 class="menu-title text-lg font-bold mb-4">快捷操作</h2>
        <ul class="menu">
          <li><a><font-awesome-icon icon="plus"></font-awesome-icon> <span class="sidebar-text">新建任务</span></a></li>
          <li><a><font-awesome-icon icon="clock"></font-awesome-icon> <span class="sidebar-text">待办事项</span></a></li>
          <li><a><font-awesome-icon icon="history"></font-awesome-icon> <span class="sidebar-text">操作日志</span></a></li>
        </ul>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="flex-1 p-6">
      <!-- 面包屑导航 -->
      <div class="breadcrumbs text-sm mb-6">
        <ul>
          <li><a>首页</a></li>
          <li>控制台</li>
        </ul>
      </div>

      <!-- 欢迎卡片 -->
      <div class="hero bg-base-100 rounded-lg shadow mb-6">
        <div class="hero-content text-center">
          <div class="max-w-md">
            <h1 class="text-5xl font-bold">欢迎回来!</h1>
            <p class="py-6">今天是美好的一天，开始您的工作吧！</p>
            <button class="btn btn-primary">开始工作</button>
          </div>
        </div>
      </div>

      <!-- 统计卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <div class="stat bg-base-100 rounded-lg shadow">
          <div class="stat-figure text-primary">
            <font-awesome-icon icon="users" class="text-3xl"></font-awesome-icon>
          </div>
          <div class="stat-title">总用户数</div>
          <div class="stat-value text-primary">2,468</div>
          <div class="stat-desc">↗︎ 14% 较上月</div>
        </div>

        <div class="stat bg-base-100 rounded-lg shadow">
          <div class="stat-figure text-secondary">
            <font-awesome-icon icon="shopping-cart" class="text-3xl"></font-awesome-icon>
          </div>
          <div class="stat-title">今日订单</div>
          <div class="stat-value text-secondary">1,234</div>
          <div class="stat-desc">↗︎ 8% 较昨日</div>
        </div>

        <div class="stat bg-base-100 rounded-lg shadow">
          <div class="stat-figure text-accent">
            <font-awesome-icon icon="fa-solid fa-money-bill" class="text-3xl"></font-awesome-icon>
          </div>
          <div class="stat-title">总收入</div>
          <div class="stat-value text-accent">¥86,742</div>
          <div class="stat-desc">↗︎ 12% 较上周</div>
        </div>

        <div class="stat bg-base-100 rounded-lg shadow">
          <div class="stat-figure text-info">
            <font-awesome-icon icon="line-chart" class="text-3xl"></font-awesome-icon>
          </div>
          <div class="stat-title">转化率</div>
          <div class="stat-value text-info">86.4%</div>
          <div class="stat-desc">↗︎ 5% 较上月</div>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <div class="card bg-base-100 shadow">
          <div class="card-body">
            <h2 class="card-title">用户增长趋势</h2>
            <div class="h-64 bg-base-200 rounded flex items-center justify-center">
              <font-awesome-icon icon="bar-chart" class="text-4xl text-gray-400"></font-awesome-icon>
              <span class="ml-2 text-gray-500">图表区域</span>
            </div>
          </div>
        </div>

        <div class="card bg-base-100 shadow">
          <div class="card-body">
            <h2 class="card-title">销售分布</h2>
            <div class="h-64 bg-base-200 rounded flex items-center justify-center">
              <font-awesome-icon icon="pie-chart" class="text-4xl text-gray-400"></font-awesome-icon>
              <span class="ml-2 text-gray-500">饼图区域</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 最近活动 -->
      <div class="card bg-base-100 shadow mb-6">
        <div class="card-body">
          <h2 class="card-title">最近活动</h2>
          <div class="overflow-x-auto">
            <table class="table">
              <thead>
              <tr>
                <th>用户</th>
                <th>操作</th>
                <th>时间</th>
                <th>状态</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>
                  <div class="flex items-center gap-3">
                    <div class="avatar">
                      <div class="mask mask-squircle w-12 h-12">
                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
                      </div>
                    </div>
                    <div>
                      <div class="font-bold">张三</div>
                      <div class="text-sm opacity-50">管理员</div>
                    </div>
                  </div>
                </td>
                <td>创建了新用户</td>
                <td>2分钟前</td>
                <td><span class="badge badge-success">成功</span></td>
              </tr>
              <tr>
                <td>
                  <div class="flex items-center gap-3">
                    <div class="avatar">
                      <div class="mask mask-squircle w-12 h-12">
                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
                      </div>
                    </div>
                    <div>
                      <div class="font-bold">李四</div>
                      <div class="text-sm opacity-50">编辑</div>
                    </div>
                  </div>
                </td>
                <td>更新了商品信息</td>
                <td>15分钟前</td>
                <td><span class="badge badge-warning">警告</span></td>
              </tr>
              <tr>
                <td>
                  <div class="flex items-center gap-3">
                    <div class="avatar">
                      <div class="mask mask-squircle w-12 h-12">
                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
                      </div>
                    </div>
                    <div>
                      <div class="font-bold">王五</div>
                      <div class="text-sm opacity-50">用户</div>
                    </div>
                  </div>
                </td>
                <td>完成了订单</td>
                <td>1小时前</td>
                <td><span class="badge badge-success">成功</span></td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- 底部信息 -->
      <footer class="footer footer-center p-4 bg-base-300 text-base-content rounded-lg">
        <aside>
          <p>Copyright © 2024 - All right reserved by DaisyUI Admin</p>
        </aside>
      </footer>
    </div>
  </div>
  </div>
</template>
<script>
import { theme } from '@/extensions/components'
export default {
  components:{
    theme
  },
  data(){
    return {}
  }
  }
</script>
